<template>
  <div class="mobile-quick-amount-config">
    <el-form>
      <el-table
        border
        :data="tableData.fastAmount"
        v-loading="loading"
        element-loading-text="加载中..."
      >
        <el-table-column label="快捷金额-1" align="center" min-width="160px">
          <template slot-scope="{}">
            <el-input-number
              :disabled="!isEditable"
              v-model="fastAmountList[0]"
              :min="1"
              :step="50"
              :max="1000000000"
              :precision="2"
              controls-position="right"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="快捷金额-2" align="center" min-width="160px">
          <template slot-scope="{}">
            <el-input-number
              :disabled="!isEditable"
              v-model="fastAmountList[1]"
              :min="1"
              :step="50"
              :max="1000000000"
              :precision="2"
              controls-position="right"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="快捷金额-3" align="center" min-width="160px">
          <template slot-scope="{}">
            <el-input-number
              :disabled="!isEditable"
              v-model="fastAmountList[2]"
              :min="1"
              :step="50"
              :max="1000000000"
              :precision="2"
              controls-position="right"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="快捷金额-4" align="center" min-width="160px">
          <template slot-scope="{}">
            <el-input-number
              :disabled="!isEditable"
              v-model="fastAmountList[3]"
              :min="1"
              :step="50"
              :max="1000000000"
              :precision="2"
              controls-position="right"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="快捷金额-5" align="center" min-width="160px">
          <template slot-scope="{}">
            <el-input-number
              :disabled="!isEditable"
              v-model="fastAmountList[4]"
              :min="1"
              :step="50"
              :max="1000000000"
              :precision="2"
              controls-position="right"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="快捷金额-6" align="center" min-width="160px">
          <template slot-scope="{}">
            <el-input-number
              :disabled="!isEditable"
              v-model="fastAmountList[5]"
              :min="1"
              :step="50"
              :max="1000000000"
              :precision="2"
              controls-position="right"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="快捷金额-7" align="center" min-width="160px">
          <template slot-scope="{}">
            <el-input-number
              :disabled="!isEditable"
              v-model="fastAmountList[6]"
              :min="1"
              :step="50"
              :max="1000000000"
              :precision="2"
              controls-position="right"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="快捷金额-8" align="center" min-width="160px">
          <template slot-scope="{}">
            <el-input-number
              :disabled="!isEditable"
              v-model="fastAmountList[7]"
              :min="1"
              :step="50"
              :max="1000000000"
              :precision="2"
              controls-position="right"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="{}">
            <el-button
              type="text"
              v-if="roleCheck(finaRechargeType.rechargeAmountMobile) && !isEditable"
              @click="onToggleEdit"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              v-if="roleCheck(finaRechargeType.rechargeAmountMobile) && isEditable"
              @click="onSaveAppQuickAmount"
            >
              保存
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>

// constants
import { finaRechargeType } from '@/router/financeRoutes';

// services
import {
  updateRechargeQuickAmountForApp,
} from '@/services/api/recharge';

// mixins
import {
  grid, form,
} from '@/build';


export default {
  name: 'recharge-limit-setting',
  props: {
    limitType: {
      type: Number,
      isRequired: true,
    },
    tableData: {
      type: Object,
    },
    fastAmountList: {
      type: Array,
      default: () => ['', '', '', '', '', '', '', ''],
    },
  },
  mixins: [grid, form],
  data() {
    return {
      finaRechargeType,
      isEditable: false,
    };
  },
  methods: {
    onToggleEdit() {
      this.isEditable = !this.isEditable;
    },
    onSaveAppQuickAmount() {
      let hasNull = false;
      this.fastAmountList.forEach((item) => {
        if (!item) {
          hasNull = true;
        }
      });
      if (hasNull) {
        this.$message.warning('充值金额不能为空');
        return;
      }
      this.doSave({ action: 'saveForm' });
      this.isEditable = false;
    },
  },
  mounted() {
    this.bindSave(updateRechargeQuickAmountForApp, 'saveForm', 'fastAmountList', {
      beforeSend: (data) => {
        const amountList = data.filter(item => !!item);
        return {
          amounts: Array.isArray(amountList) ? amountList.join(',') : '',
          limitType: this.limitType,
        };
      },
      afterSuccess: () => {
        this.$parent.getAll();
      },
    });
  },
};
</script>

<style lang="scss" scoped>
  .mobile-quick-amount-config {
    margin-bottom: 20px;
  }

</style>
